<template>
  <div class="todoList">
    <div class="list-info">
      <span class="list-title">{{title}}</span>
      <span class="list-count">{{todolist.length}}</span>
    </div>
    <ul>
      <li v-for='(item,key) in todolist' :key="item.val">
        <span @click="add(key)">+</span>
        <input type="text" v-model='todolist[key]' readonly="false">
        <span @click="clickToDel(key)">-</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'todoList',
  data() {
    return {
      val: '',
      todolist: [],
    };
  },
  methods: {
    clickToDel(index) {
      this.todolist.splice(index, 1);
    },
    add(index) {
      const arrs = this.todolist.splice(index, 1)[0];
      // console.log(arrs);
      this.$emit('output', arrs);
    },
  },
  props: ['title', 'injectmsg'],
  watch: {
    injectmsg() {
      // this.injectmsg !== '' && this.todolist.push(this.injectmsg);
      if (this.injectmsg !== '') {
        this.todolist.push(this.injectmsg);
      }
      this.$emit('update:injectmsg', '');
    },
  },
};
</script>

<style>
  .list-info>span{
    display: inline-block;
    line-height: 50px;
    width: 49%;
  }
  .list-count{
    text-align: right;
  }
  li{
    background: #e2e2e2;
    margin: 1px;
  }
  li>*{
    display: inline-block;
    height: 30px;
  }
  li>input{
    border: none;
    outline: none;
    background: #e2e2e2;
  }
</style>
